{% extends "finance/base.html" %}

{% block content %}

<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
        width: 100%;
    }

    .table {
        width: 100%;
        table-layout: auto;
    }

    .pagination {
        margin-bottom: 0;
    }
</style>


<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-3">

        <h3 class="mb-0">
            Material Account Mapping
        </h3>

    </div>


    {% if messages %}

        {% for message in messages %}

            <div class="alert alert-warning alert-dismissible fade show"
                 role="alert">

                {{ message }}

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="alert">
                </button>

            </div>

        {% endfor %}

    {% endif %}


    <div class="card shadow-sm">

        <div class="card-body">


            <!-- SEARCH -->

            <form method="GET"
                  class="row mb-3">

                <div class="col-md-5">

                    <input
                        type="text"
                        name="search"
                        class="form-control"
                        placeholder="Search KIMAP or Material Name..."
                        value="{{ search }}"
                    >

                </div>

                <div class="col-md-auto">

                    <button
                        type="submit"
                        class="btn btn-secondary">

                        <i class="bi bi-search"></i>
                        Search

                    </button>

                </div>

                {% if search %}

                <div class="col-md-auto">

                    <a
                        href="{% url 'material_account_mapping' %}"
                        class="btn btn-outline-secondary">

                        Clear

                    </a>

                </div>

                {% endif %}

            </form>


            <form method="POST"
                  action="{% url 'save_material_account_mapping' %}">

                {% csrf_token %}


                <div class="table-responsive">

                    <table
                        class="table table-bordered table-hover align-middle"
                        id="mappingTable">

                        <thead class="table-dark">

                            <tr>

                                <th style="width: 15%;">
                                    KIMAP
                                </th>

                                <th style="width: 35%;">
                                    Material Name
                                </th>

                                <th style="width: 25%;">
                                    Category
                                </th>

                                <th style="width: 8%;">
                                    UOM
                                </th>

                                <th style="width: 17%;">
                                    Account No
                                </th>

                            </tr>

                        </thead>


                        <tbody>

                            {% for material in materials %}

                            <tr class="material-row">

                                <input
                                    type="hidden"
                                    name="material_id"
                                    value="{{ material.id }}"
                                >

                                <td>
                                    {{ material.kimap }}
                                </td>

                                <td>
                                    {{ material.name }}
                                </td>

                                <td>
                                    {{ material.category }}
                                </td>

                                <td>
                                    {{ material.uom }}
                                </td>

                                <td>

                                    <select
                                        name="acct_no_{{ material.id }}"
                                        class="form-select form-select-sm">

                                        <option value="">
                                            -- Select Account --
                                        </option>

                                        {% for account in accounts %}

                                            <option
                                                value="{{ account.acct_no }}"
                                                {% if material.acct_no == account.acct_no %}
                                                    selected
                                                {% endif %}
                                            >

                                                {{ account.acct_no }}
                                                -
                                                {{ account.acct_name }}

                                            </option>

                                        {% endfor %}

                                    </select>

                                </td>

                            </tr>

                            {% empty %}

                            <tr>

                                <td colspan="5"
                                    class="text-center">

                                    No material data found.

                                </td>

                            </tr>

                            {% endfor %}

                        </tbody>

                    </table>

                </div>


                <!-- PAGINATION -->

                {% if page_obj.paginator.num_pages > 1 %}

                <div class="d-flex justify-content-between align-items-center mt-3">

                    <div class="text-muted">

                        Showing
                        {{ page_obj.start_index }}
                        -
                        {{ page_obj.end_index }}
                        of
                        {{ page_obj.paginator.count }}
                        materials

                    </div>


                    <nav aria-label="Material pagination">

                        <ul class="pagination">


                            <!-- PREVIOUS -->

                            {% if page_obj.has_previous %}

                            <li class="page-item">

                                <a
                                    class="page-link"
                                    href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search|urlencode }}{% endif %}">

                                    Previous

                                </a>

                            </li>

                            {% else %}

                            <li class="page-item disabled">

                                <span class="page-link">
                                    Previous
                                </span>

                            </li>

                            {% endif %}


                            <!-- PAGE NUMBERS -->

                            {% for num in page_obj.paginator.page_range %}

                                {% if num == page_obj.number %}

                                <li class="page-item active">

                                    <span class="page-link">
                                        {{ num }}
                                    </span>

                                </li>

                                {% elif num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}

                                <li class="page-item">

                                    <a
                                        class="page-link"
                                        href="?page={{ num }}{% if search %}&search={{ search|urlencode }}{% endif %}">

                                        {{ num }}

                                    </a>

                                </li>

                                {% endif %}

                            {% endfor %}


                            <!-- NEXT -->

                            {% if page_obj.has_next %}

                            <li class="page-item">

                                <a
                                    class="page-link"
                                    href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search|urlencode }}{% endif %}">

                                    Next

                                </a>

                            </li>

                            {% else %}

                            <li class="page-item disabled">

                                <span class="page-link">
                                    Next
                                </span>

                            </li>

                            {% endif %}

                        </ul>

                    </nav>

                </div>

                {% endif %}


                <!-- SAVE -->

                <div class="d-flex justify-content-end mt-3">

                    <button
                        type="submit"
                        class="btn btn-primary">

                        <i class="bi bi-save"></i>
                        Save All Mapping

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

{% endblock %}